<template>
  <ul class="yin-nav">
    <li v-for="(item, index) in styleList" 
    :key="index" 
    :class="{ active: item.name == activeName }" 
    @click="handleChangeView(item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">

const props = defineProps<({
  styleList: Array<{name: string,value:string}>,
  activeName: String,
})>();

const emit = defineEmits<{
  (e: 'click', val: any): void
}>();

function handleChangeView(val: any) {
  emit('click', val);
}
</script>

<style lang="scss" scoped>
// 使用Sass 3.0新模块系统导入
@use "@/assets/css/var" as *;

.yin-nav {
  width: 100%;
  li {
    line-height: 2rem;
    font-size: 1rem;
    color: $color-grey;
    border-bottom: none;
    cursor: pointer;
  }
  li.active {
    color: $color-black;
    font-weight: 600;
  }
}

@media screen and (min-width: $sm) {
  .yin-nav {
    li {
      margin: 0.5rem 1rem;
    }
  }
}

@media screen and (max-width: $sm) {
  .yin-nav {
    li {
      margin: 0.3rem 0.4rem;
    }
  }
}
</style>
